<!DOCTYPE html>
<html>
<head>
    <title>Parallel Wires Diagram</title>
</head>
<body>
<canvas id="canvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters for the drawing
    const centerX = canvas.width / 2;
    const wireSeparation_d = 200;
    const wireRadius_a = 10;
    const wireLength = 250;

    const x1 = centerX - wireSeparation_d / 2; // Center of left wire
    const x2 = centerX + wireSeparation_d / 2; // Center of right wire

    const wireTopY = 50;
    const wireBottomY = wireTopY + wireLength;
    
    // Helper function to draw an arrow
    function drawArrow(ctx, x, y, angle, size = 5) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2);
        ctx.stroke();
        ctx.restore();
    }

    // Function to draw a wire
    function drawWire(x_center, y_top, length, radius) {
        // Draw wire body (rectangle)
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x_center - radius, y_top);
        ctx.lineTo(x_center - radius, y_top + length);
        ctx.moveTo(x_center + radius, y_top + length);
        ctx.lineTo(x_center + radius, y_top);
        ctx.stroke();
        
        // Draw rounded bottom
        ctx.beginPath();
        ctx.arc(x_center, y_top + length, radius, 0, Math.PI);
        ctx.stroke();

        // Draw top ellipse to indicate it's a cylinder
        ctx.beginPath();
        ctx.ellipse(x_center, y_top, radius, radius * 0.4, 0, Math.PI, 2 * Math.PI);
        ctx.stroke();
        
        // Draw center axis (dash-dot line)
        ctx.save();
        ctx.lineWidth = 1;
        ctx.setLineDash([8, 3, 2, 3]);
        ctx.beginPath();
        ctx.moveTo(x_center, y_top - 20);
        ctx.lineTo(x_center, y_top + length);
        ctx.stroke();
        ctx.restore();
    }
    
    // Draw the two wires
    drawWire(x1, wireTopY, wireLength, wireRadius_a);
    drawWire(x2, wireTopY, wireLength, wireRadius_a);
    
    // --- Draw Dimensions ---
    ctx.lineWidth = 1;

    // Dimension 'a' for the left wire (between axis and right edge)
    const dim_y_a = wireBottomY - 40;
    ctx.beginPath();
    ctx.moveTo(x1, dim_y_a);
    ctx.lineTo(x1 + wireRadius_a, dim_y_a);
    ctx.stroke();
    drawArrow(ctx, x1, dim_y_a, Math.PI); // Left arrow
    drawArrow(ctx, x1 + wireRadius_a, dim_y_a, 0); // Right arrow
    ctx.fillText('a', x1 + wireRadius_a / 2, dim_y_a - 10);

    // Dimension 'a' for the right wire (between axis and left edge)
    ctx.beginPath();
    ctx.moveTo(x2 - wireRadius_a, dim_y_a);
    ctx.lineTo(x2, dim_y_a);
    ctx.stroke();
    drawArrow(ctx, x2 - wireRadius_a, dim_y_a, Math.PI); // Left arrow
    drawArrow(ctx, x2, dim_y_a, 0); // Right arrow
    ctx.fillText('a', x2 - wireRadius_a / 2, dim_y_a - 10);

    // Dimension 'd'
    const dim_y_d = wireBottomY + 40;
    // Extension lines
    ctx.beginPath();
    ctx.moveTo(x1, wireBottomY + wireRadius_a);
    ctx.lineTo(x1, dim_y_d);
    ctx.moveTo(x2, wireBottomY + wireRadius_a);
    ctx.lineTo(x2, dim_y_d);
    ctx.stroke();
    // Horizontal line with arrows
    ctx.beginPath();
    ctx.moveTo(x1, dim_y_d);
    ctx.lineTo(x2, dim_y_d);
    ctx.stroke();
    drawArrow(ctx, x1, dim_y_d, Math.PI); // Left arrow
    drawArrow(ctx, x2, dim_y_d, 0); // Right arrow
    ctx.fillText('d', centerX, dim_y_d - 10);
    
    // Draw the text label at the bottom
    ctx.font = '20px "Songti SC", "SimSun"';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText('习题 7-49 图', centerX, canvas.height - 30);

</script>
</body>
</html>